<template>
	<up-popup :show="show"  mode="center" bgColor="transparent" @close="emits('close')" >
		<view class="answer-fk-alert" >
			<image :src="`${$imgurl}/static/fk-bg.png`" mode=""></image>
			<view class="text-box">
				<view class="text">
					<view class="h1">
						密码验证成功！
					</view>
					<view class="msg">
						恭喜您！密码破解成功~<br>待发起者用户确认您的身份后，<br>即可领取礼物！
					</view>
				</view>
				<view class="btn" @click="emits('close')">
					确定提交
				</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import {ref} from "vue"
	const emits = defineEmits();
	let props = defineProps({
			show:{
				type:Boolean,
				default:false
			}
		});
</script>

<style lang="scss">
	.answer-fk-alert{
		position: relative;
		image{
			width:600rpx;
			height:644rpx;
			display: flex;
		}
		.text-box{
			position: absolute;
			width:100%;
			top:220rpx;
			text-align: center;
			.text{
				line-height: 1;
				.h1{
					font-weight: bold;
					font-size: 44rpx;
					color:#F5493D;
				}
				.msg{
					font-size:32rpx;
					line-height: 48rpx;
					margin-top:20rpx;
					.p{
						padding-top:20rpx;
						line-height: 1;
						display: flex;
						justify-content: center;
						align-items: flex-end;
						padding-bottom: 10rpx;
						.em{
							font-size:80rpx;color:#F76B60;
							padding:0 8px;
						}
					}
				}
			}
		}
		.btns{
			display: flex;
			padding:80rpx 40rpx 0 40rpx;
			gap: 24rpx;
			.it{
				flex:1;line-height: 92rpx;
				background-color: #F2F3F5;
				border-radius: 12rpx;
				color:#929CA6;
				font-size:32rpx;
				font-weight: bold;
				&.on{
					background: linear-gradient( 125deg, #FF9940 0%, #FD2A00 100%);
					color:#fff;
				}
				
			}
		}
		.btn{
			
			width:440rpx;
			margin:0 auto;
			box-sizing: border-box;
			line-height: 96rpx;
			margin-top: 90rpx;
			background: linear-gradient( 125deg, #FF9940 0%, #FD2A00 100%);
			border-radius:16rpx;
			text-align: center;font-weight: bold;
			color:#fff;
		}
	}
</style>